<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/dijit/themes/soria/soria.css">
    <script type="text/javascript" src="/javascripts/arcgis_js_api/library/3.16/3.16/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/parser", "dojo/domReady!"]);
    </script>



    <title>BorderContainer学习</title>
</head>
<body class="soria">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:'true', liveSplitters:'true'" id="borderContainer" style="width: 400px; height: 300px;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'leading'"  style="width: 100px;">
        Leading Region
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true' ,region:'trailing'" style="width: 100px;">
        Tailing Region
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props= "splitter:'true', region:'center'">
        Center Region
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', liveSplitters:'true', region:'top'">
        Top Region
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'bottom'">
        Bottom Region
    </div>
</div>
</body>
</html>